<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
    </style>
</head>
<body>
<div id="app">
    <!--1.顶部搜索框-->
    <el-row>
    <el-form :inline="true" :model="formSerach" class="demo-form-inline">
        <el-form-item label="姓名">
            <el-input v-model="formSerach.username" placeholder="请输入姓名..."></el-input>
        </el-form-item>
        <el-form-item label="选择年级">
            <el-select v-model="formSerach.grade" placeholder="年级">
                <el-option label="不选择" value=""></el-option>
                <el-option label="一年级" value="1"></el-option>
                <el-option label="二年级" value="2"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
        <el-form-item>
            <el-button type="danger" icon="el-icon-refresh" @click="reset()">重置条件</el-button>
        </el-form-item>
    </el-form>
    </el-row>
    <!--2.提供操作的按钮组-->
    <el-row>
        <el-button type="danger" icon="el-icon-delete-solid" @click="batchDelete()" >批量删除</el-button>
        <el-button type="primary" icon="el-icon-plus"  @click="addInfo()">新增</el-button>
    </el-row>
    <!--3.新增弹出框-->
    <el-dialog :title="info" :visible.sync="dialogFormVisible">
        <el-form :model="student">
            <el-form-item label="学生姓名" :label-width="formLabelWidth">
                <el-input v-model.trim="student.username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" :label-width="formLabelWidth">
                <el-input v-model="student.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="年龄" :label-width="formLabelWidth">
                <el-input v-model.number="student.age" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="电话" :label-width="formLabelWidth">
                <el-input v-model="student.phone" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="状态" :label-width="formLabelWidth">
                <el-radio-group v-model.number="student.status">
                    <el-radio :label="1">启用</el-radio>
                    <el-radio :label="0">禁用</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="out()">取 消</el-button>
            <el-button type="primary" @click="okDo()">确 定</el-button>
        </div>
    </el-dialog>

    <!--4.渲染数据表格-->
    <template>
        <el-table
                :data="tableData"
                style="width: 100%"
                :row-class-name="tableRowClassName"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="id"
                    label="编号"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="username"
                    label="姓名"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="password"
                    label="密码">
            </el-table-column>
            <el-table-column
                    prop="age"
                    label="年龄">
            </el-table-column>
            <el-table-column
                    prop="phone"
                    label="电话">
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="状态">
            </el-table-column>
            <!--操作-->
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>

    <!--5.分页条-->
    <div class="block">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="pageSize"
                layout="sizes, prev, pager, next, jumper,->,total"
                :total="total">
        </el-pagination>
    </div>








</div>
</body>
</html>
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<script>
   new Vue({
       el:'#app',
       data(){
           return{
               formSerach: {
                   username: '',
                   grade: ''
               },
               dialogFormVisible: false,
               //收集弹出框数据  定义空对象也是可以的
               student: {
               },
               formLabelWidth: '120px',
               /*列表数据*/
               tableData: [{
                   id:1,
                   username: '王小虎',
                   password: '12465',
                   age: 18,
                   phone:"13577730600",
                   status:1
               },{
                   id:2,
                   username: '王小虎',
                   password: '12465',
                   age: 18,
                   phone:"13577730600",
                   status:1
               },
                ],
               info:'',
               //当选中的时候会就将选中的对象传入的数组中 比如做批量删除
               multipleSelection: [],
               currentPage: 4,//当前页
               total:100,//总数据数
               pageSize:10//每页默认显示几条
           }
       },
       methods: {
           /*搜索功能的方法*/
           onSubmit() {
               console.log('submit!');
           },
           /*重置按钮的方法*/
           reset(){
               //清空数据模型
               this.formSerach={};
           },
           //批量删除
           batchDelete(){
               console.log('delete!');
           },
           //新增信息按钮弹出按钮
           addInfo(){
               //设置新增的文字
               this.info="新增数据信息";
               this.dialogFormVisible = true;//显示添加框
               this.student={};

           },
           //弹出框关闭按钮
           out(){
               this.dialogFormVisible=false;//关闭弹窗
               this.student={}//清空数据模型
               this.$message('您取消了操作');


           },
           //弹出框提交按钮
           okDo(){},
           //设置颜色
           tableRowClassName({row, rowIndex}) {
               if (rowIndex === 1) {
                   return 'warning-row';
               } else if (rowIndex === 3) {
                   return 'success-row';
               }
               return '';
           },
           //编辑
           handleEdit(row) {
               console.log(row);
               //设置编辑的文字
               this.info="编辑数据信息";
               this.dialogFormVisible = true;
               this.student=row;//也可以去数据库根据id查询以后再显示
           },
           //删除
           handleDelete(row) {
               this.$confirm('此操作将永久删除数据, 是否继续?', '提示', {
                   confirmButtonText: '确定',
                   cancelButtonText: '取消',
                   type: 'warning'
               }).then(() => {
                   //发送请求
                   this.$message({
                       type: 'success',
                       message: '删除成功!'
                   });


               }).catch(() => {
                   this.$message({
                       type: 'info',
                       message: '已取消删除'
                   });
               });
           },
           /*多选按钮触发的事件*/
           handleSelectionChange(val) {
               console.log(val)
               this.multipleSelection = val;
           },
           handleSizeChange(val) {
               console.log(`每页 ${val} 条`);
           },
           handleCurrentChange(val) {
               console.log(`当前页: ${val}`);
           }
       }

   });
</script>


